
<template>
  <div class="dynamic_table_item">
    <template v-if="props.question.type === 'alone'">
      <a-date-picker
        v-model:value="localValue.value"
        :disabled="props.question.disabled"
        :show-time="props.question.state.showTime"
        :disabled-date="props.question.state.disabledDate"
        :picker="props.question.state.picker || 'date'"
        :format="props.question.state.format"
        :valueFormat="props.question.state.valueFormat || 'YYYY-MM-DD'"
        @change="change"
      ></a-date-picker>
    </template>
    <template v-else-if="props.question.type === 'timeRange'">
      <a-time-range-picker
        @change="change"
        v-model:value="localValue.value"
        :show-time="props.question.state.showTime"
        :disabled="props.question.disabled"
        :format="props.question.state.format"
        :valueFormat="props.question.state.valueFormat || 'HH:mm:ss'"
      />
    </template>
    <template v-else>
      <a-range-picker
        ref="picker"
        v-model:value="localValue.value"
        :disabled="props.question.disabled"
        :placeholder="['开始日期', '结束日期']"
        :show-time="props.question.state.showTime"
        :ranges="props.question.state.ranges || {}"
        :picker="props.question.state.picker || 'date'"
        :format="props.question.state.format"
        :valueFormat="props.question.state.valueFormat || 'YYYY-MM-DD'"
        @change="change"
      ></a-range-picker>
    </template>
  </div>
</template>

<script setup lang="ts">
import { watch,getCurrentInstance,onMounted,onUnmounted, ref} from "vue";
import dayjs, { Dayjs } from 'dayjs'
import { TIMESERVE } from "@/mixins/subject/subject-types";
import { QuestionBase } from "@/components/public-template/DynamicForm/question-base";

//subject变量

const { proxy  }:any = getCurrentInstance()
let props = defineProps<{ question: any;formData:any;dataForm?:any;index?:any}>();
const emit = defineEmits([ "update:formData"]);

const localValue:any = ref(null);

watch(()=>localValue.value, (val)=>{
    emit('update:formData', val);
},{ flush:'sync' })

watch(
  () => props.formData,
  (val) => {
    if( props.formData !==  localValue.value){
      localValue.value = props.formData;
    }
  },
  { flush: 'sync' }
);

onMounted(() => {
  localValue.value = props.formData;
  if( Array.isArray(localValue.value)  ){
    localValue.value.map((data)=>dayjs.unix(data).format(props.question.state.format || 'YYYY-MM-DD HH:mm:ss'))
  }
})

const change = ()=>{
  proxy.$NotificationFormSub.pushParams({
    key: TIMESERVE,
    value: {
      key: props.question.key,
      value: localValue.value,
      data: props.dataForm,
      name: props.question.state.name
    }
  });
}


</script>

<style lang="less" scoped>
@import url('./input-time.component.less');
</style>
